<template>
  <div>
    <Header />

    <div class="fL w100 singer_cent">
      <div class="layout">
        <div class="classification fL w100">
          <div class="layout">
            <ul class="g_lei fL w100">
              <li>
                <h4>语种</h4>
                <div class="edit_lab">
                  <a>
                    <button @click="getList">华语</button>
                  </a>
                  <a><button @click="getAmerica">欧美</button></a>
                  <a><button @click="getUser">日语</button></a>
                  <a><button>韩语</button></a>
                  <a><button>粤语</button></a>
                  <a><button>小语种</button></a>
                  <a>
                    <button class="morela morela_a">更多</button>
                    <div id="mb"></div>
                    <div class="showbox_a">
                      <img src="images/san.png" />
                      <div class="nbtn_mag">
                        <button>R&B/Soul</button>
                        <button>古典</button>
                        <button>民族</button>
                        <button>英伦</button>
                        <button>金属</button>
                        <button>朋克</button>
                        <button>蓝调</button>
                        <button>雷鬼</button>
                        <button>世界音乐</button>
                        <button>拉丁</button>
                        <button>另类/独立</button>
                        <button>New Age</button>
                        <button>古风</button>
                        <button>Bossa Nova</button>
                      </div>
                    </div>
                  </a>
                </div>
              </li>
              <li>
                <h4>场景</h4>
                <div class="edit_lab">
                  <a href="###"><button>清晨</button></a>
                  <a href="###"><button>夜晚</button></a>
                  <a href="###"><button>学习</button></a>
                  <a href="###"><button>工作</button></a>
                  <a href="###"><button>午休</button></a>
                  <a href="###"><button>下午茶</button></a>
                  <a href="###"><button>地铁</button></a>
                  <a href="###"><button>驾车</button></a>
                  <a href="###"><button>酒吧</button></a>
                </div>
              </li>
              <li>
                <h4>情感</h4>
                <div class="edit_lab">
                  <a href="###"><button>怀旧</button></a>
                  <a href="###"><button>清新</button></a>
                  <a href="###"><button>浪漫</button></a>
                  <a href="###"><button>性感</button></a>
                  <a href="###"><button>伤感</button></a>
                  <a href="###"><button>治愈</button></a>
                  <a href="###"><button>放松</button></a>
                  <a href="###"><button>孤独</button></a>
                  <a href="###"><button>兴奋</button></a>
                </div>
              </li>
              <li class="bordnone">
                <h4>主题</h4>
                <div class="edit_lab">
                  <a href="###"><button>影视</button></a>
                  <a href="###"><button>ACG</button></a>
                  <a href="###"><button>儿童</button></a>
                  <a href="###"><button>校园</button></a>
                  <a href="###"><button>游戏</button></a>
                  <a href="###"><button>吉他</button></a>
                  <a href="###"><button>70后</button></a>
                  <a href="###"><button>80后</button></a>
                  <a href="###">
                    <button class="morela morela_b">更多</button>
                    <div id="mb"></div>
                    <div class="showbox_b">
                      <img src="images/san.png" />
                      <div class="nbtn_mag">
                        <button>R&B/Soul</button>
                        <button>古典</button>
                        <button>民族</button>
                        <button>英伦</button>
                        <button>金属</button>
                        <button>朋克</button>
                        <button>蓝调</button>
                        <button>雷鬼</button>
                        <button>世界音乐</button>
                        <button>拉丁</button>
                        <button>另类/独立</button>
                        <button>New Age</button>
                        <button>古风</button>
                        <button>Bossa Nova</button>
                      </div>
                    </div>
                  </a>
                </div>
              </li>
              <li>
                <h4>风格</h4>
                <div class="edit_lab">
                  <a><button>流行</button></a>
                  <a href="###"><button>摇滚</button></a>
                  <a href="###"><button>民谣</button></a>
                  <a href="###"><button>电子</button></a>
                  <a href="###"><button>舞曲</button></a>
                  <a href="###"><button>说唱</button></a>
                  <a href="###"><button>轻音乐</button></a>
                  <a href="###"><button>爵士</button></a>
                  <a href="###">
                    <button class="morela morela_a">更多</button>
                    <div id="mb"></div>
                    <div class="showbox_a">
                      <img src="images/san.png" />
                      <div class="nbtn_mag">
                        <button>R&B/Soul</button>
                        <button>古典</button>
                        <button>民族</button>
                        <button>英伦</button>
                        <button>金属</button>
                        <button>朋克</button>
                        <button>蓝调</button>
                        <button>雷鬼</button>
                        <button>世界音乐</button>
                        <button>拉丁</button>
                        <button>另类/独立</button>
                        <button>New Age</button>
                        <button>古风</button>
                        <button>Bossa Nova</button>
                      </div>
                    </div>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="top_alsog">
          <h2 class="fL">全部歌手</h2>
        </div>

        <ul class="hotsinger">
          <!-- 华语歌手 -->
          <li v-for="list in lists" :key="list.id">
            <a>
              <img :src="list.img1v1Url" />
              <p>{{ list.name }}</p>
            </a>
          </li>
          <!-- 用户信息 -->
          <li v-for="sosos in sosos">
            <a>
              <!-- <img :src="sosos.avatarUrl" /> -->
              <p>{{ sosos.nickname }}</p>
              <p>{{ sosos.signature }}</p>
            </a>
          </li>
          <!-- //欧美歌手 -->
          <li v-for="America in Americas" :key="America.id">
            <a>
              <img :src="America.img1v1Url" />
              <p>{{ America.name }}</p>
            </a>
          </li>
        </ul>
        <div class="page_cent">
          <button><</button>
          <button class="active">1</button>
          <button>2</button>
          <button>3</button>
          <button>...</button>
          <button>142</button>
          <button>></button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
  name: 'Singer',
  data() {
    return {
      lists: [],
      Americas: [],
      sosos: [],
    }
  },

  components: {
    Header,
    Footer,
  },

  computed: {},

  methods: {
    //华语歌手

    getList() {
      this.$axios
        .get('http://localhost:3000/artist/list?type=-1&area=7')
        .then(res => {
          console.log('调用了')
          console.log(res.data.artists)
          this.$bus.$emit('getList', res.data.artists)
        })
    },
    //欧美歌手
    getAmerica() {
      this.$axios
        .get('http://localhost:3000/artist/list?type=-1&area=96')
        .then(res => {
          console.log('调用了')
          console.log(res.data.artists)
          this.$bus.$emit('getAmerica', res.data.artists)
        })
    },
    //用户信息测试
    getUser() {
      this.$axios
        .get(
          `http://localhost:3000/login?email=2801772839@qq.com&password=15035303749`
        )
        .then(res => {
          console.log('获取成功', res.data.profile)
          this.$bus.$emit('getUser', res.data.profile)
        })
    },
  },
  mounted() {
    //华语歌手
    this.$bus.$on('getList', lists => {
      console.log('我是歌手组件 收到了数据:', lists)
      this.lists = lists
    }),
      //欧美歌手
      this.$bus.$on('getAmerica', Americas => {
        console.log('我是外国歌手组件 收到了数据:', Americas)
        this.Americas = Americas
      }),
      this.$bus.$on('getUser', sosos => {
        console.log('我是用户信息组件 收到了数据:', sosos)
        this.sosos = sosos
      })
  },
}
</script>
<style lang="css" scoped></style>
